<!-- 
展示一个月；每次可以选择某一天为忙碌（需求变更废弃） 
 -->
<template>
	<view style="padding-top:20rpx;">
		<view class="funtype marginAuto flex">
			<view class="funtypeeach flex">
				<view class="funcolor" style="background:#BD3124;"></view>
				<view class="funtxt">忙碌</view>
			</view>
			<view class="funtypeeach flex">
				<view class="funcolor" style="background:#fff;border: 1px solid #ccc;"></view>
				<view class="funtxt">空闲</view>
			</view>
			<view class="funtypeeach flex">
				<view class="funcolor" style="background:#A2EF4D;"></view>
				<view class="funtxt">有单</view>
			</view>
		</view>
		<view class="calendar marginAuto">
			<view class="catime marginAuto flex">
				<view class="catimel" @click="jianmonthfun()">
					<text class="tn-icon-left"></text>
				</view>
				<view class="catimenyr">{{ showyer+'年'+showmonth+'月' }}</view>
				<view class="catimer" @click="jiamonthfun()">
					<text class="tn-icon-right"></text>
				</view>
			</view>
			<view class="calendxq marginAuto flex" style="padding: 20rpx;padding-bottom: 0;margin-top:20rpx;">
				<view class="calendxeach" style="height:60rpx;">日</view>
				<view class="calendxeach" style="height:60rpx;">一</view>
				<view class="calendxeach" style="height:60rpx;">二</view>
				<view class="calendxeach" style="height:60rpx;">三</view>
				<view class="calendxeach" style="height:60rpx;">四</view>
				<view class="calendxeach" style="height:60rpx;">五</view>
				<view class="calendxeach" style="height:60rpx;">六</view>
			</view>
			<view class="calendxq marginAuto flex" style="padding:20rpx;padding-top:0;">
				<view class="calendxeach" 
				v-for="(item,index) in calendardata" :key="index"
				:class="item.type == 1 ? 'alone': (item.type === 0 ? 'busy' :'')"
				@click="seefun(item,index)"
				>
					<view class="rq">{{ item.day_format }}</view>
					<view class="rqxq" v-if="item.type == 1 || item.type === 0" @click.stop="cancelpbfun(item,index)">
						<!-- <view>08:00</view>
						<view>|</view>
						<view>09:00</view> -->
						<!-- <view>点击查看</view> -->
						<view>取消忙碌</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <busytime v-if="isbusytime" 
		@clsoeicon="clsoeicon"
		@enter = "showgetcallistfun"
		:clickitem="clickitem" 
		:showyer="showyer" 
		:showmonth="showmonth"></busytime> -->
	</view>
</template>

<script>
	import busytime from '../../components/busytime.vue'
	export default {
		components:{
			busytime
		},
		data() {
			return {
				isbusytime:true,
				showyer:'',
				showmonth:'',
				showday:'',
				calendardata:[],
				
				clickitem:{}
			}
		},
		onLoad() {
			this.getcalxqfun();
			// this.dutylistfun()
		},
		onShow() {
			this.isbusytime = false;
		},
		methods: {
			seefun(item){  // 查看| ->设置忙碌时间
				this.clickitem = item;
				// this.isbusytime = true;
				let sendData = {
					day:this.showyer+'-'+this.showmonth+'-'+item.day_format
				};
				this.apifun.unirequest('/partner/duty/setBusyTime','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast("设置成功");
						this.dutylistfun()
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			cancelpbfun(item){  // 取消忙碌
				let sendData = {
					id:item.id || ''
				};
				this.apifun.unirequest('/partner/duty/cancel','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.calendardata.forEach((items,indexs)=>{
							if(items.id == item.id){
								items.type = '';
								items.day = '';
								items.id = '';
							}
						})
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			dutylistfun(){  // 值班列表
				let sendData = {
					month:this.showyer+'-'+this.showmonth,
				};
				this.apifun.unirequest('/partner/duty/getDutyList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						console.log(this.calendardata)
						datas.forEach((item,index)=>{
							this.calendardata.forEach((items,indexs)=>{
								if(items.day_format == item.day_format){
									items.type = item.type;
									items.day = item.day;
									items.id = item.id;
								}
							})
						});
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			getcalxqfun(){  // 获取日历展示信息
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				this.showyer = year;
				this.showmonth = month;
				this.showgetcallistfun();
			},
			showgetcallistfun(){  // 展示日历列表
				let allday = new Date(this.showyer, this.showmonth, 0).getDate();
				let week = new Date(this.showyer+'-'+this.showmonth+'-01').getDay();
				let calendardata = [];
				for(var i=1;i<=allday;i++){
					calendardata.push({
						day_format:i,
						type:''
					})
				};
				for(var i=1;i<=week;i++){
					calendardata.unshift({
						day_format:'',
						type:''
					})
				};
				this.calendardata = calendardata;
				this.dutylistfun()
			},
			jianmonthfun(){
				this.showmonth--;
				if(this.showmonth == 0){
					this.showmonth = 12;
					this.showyer--
				};
				this.showgetcallistfun()
			},
			jiamonthfun(){
				this.showmonth++;
				if(this.showmonth == 13){
					this.showmonth = 1;
					this.showyer++
				};
				this.showgetcallistfun()
			},
			clsoeicon(){
				this.isbusytime = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.funtype{
		width: 600rpx;
		padding: 20rpx 0;
		background:#fff;
		border-radius: 20rpx;
		justify-content: space-around;
		.funtypeeach{
			.funcolor{
				width: 30rpx;
				height: 30rpx;
			}
			.funtxt{
				margin-left:10rpx;
			}
		}
	}
	.calendar{
		width: 690rpx;
		padding: 20rpx 0;
		.catime{
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			justify-content: space-around;
			.catimel,
			.catimer{
				font-size: 38rpx;
			}
			.catimenyr{
				font-size:34rpx;
				font-weight: 600;
			}
		}
		.calendxq{
			width: 660rpx;
			background: #fff;
			flex-wrap: wrap;
			border-radius: 20rpx;
			border-collapse:collapse;
			.calendxeach{
				width: 90rpx;
				height: 120rpx;
				border:1px solid #ccc;
				margin-top: -1px;
				margin-left: -1px;
				padding: 10rpx 0;
				color: #333;
				text-align: center;
				.rq{
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: center;
				}
				.rqxq{
					font-size:20rpx;
					margin-top:22rpx;
					text-align: center;
				}
			}
			.alone{
				background:#A2EF4D;
				color: #333;
			}
			.leisure{
				background: #fff;
			}
			.busy{
				background:#BD3124;
				color: #fff;
			}
		}
	}
</style>